<script setup>
</script>

<template>

    <div class="body">
        <div class="img"><img src="@/assets/img/facebook.png" alt=""></div>
        <div class="img"><img src="@/assets/img/QQ.png" alt=""></div>
        <div class="img"><img src="@/assets/img/apple.png" alt=""></div>
        <div class="img"><img src="@/assets/img/twitter.png" alt=""></div>
    </div>
</template>

<style scoped lang="scss">
.body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efeeee;
    gap: 30px;

    .img {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        /*盒子阴影box-shadow: x y 模糊度 颜色;可以添加多层阴影，使用逗号隔开*/
        box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
        -18px -18px 30px rgba(255, 255, 255);
        transition: all 0.2s;
        /*鼠标移动上面改变阴影以及大小，从而达到按下去的效果*/

        &:hover {
            cursor: pointer;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
            0 0 0 rgba(255, 255, 255, 0.8),
            inset 18px 18px 30px rgba(0, 0, 0, 0.1),
            inset -18px -18px 30px rgba(255, 255, 255, 1);
            img {
                width: 58px;
            }
            transition: all .2s;
        }
    }

    img {
        width: 60px;
    }
}

</style>
